<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>嘉楠读书会3333888</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="css/FanDeng.css">
  <link rel="stylesheet" href="css/swiper.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/jquery.js"></script>
  <script src="js/ajax.js"></script>
  <style>
    #swiper-wrapper{
    transition-duration: 0ms; 
    transform: translate3d(-1242px, 0px, 0px)
  }
  .scroll {
    height: 36.5%;
  }
  .body{
    padding-bottom: 5rem;
    height:100%;
  }
  </style>
</head>
<body>
<div id="top">
  <div class="swiper-container" id="nav">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <span style="color:rgba(255,72,145,1);">推荐</span></div>
      <div class="swiper-slide">
        <span>心灵</span></div>
      <div class="swiper-slide">
        <span>管理</span></div>
      <div class="swiper-slide">
        <span>职场</span></div>
      <div class="swiper-slide">
        <span>家庭</span></div>
      <div class="swiper-slide">
        <span>人文</span></div>
      <div class="swiper-slide">
        <span>创业</span></div>
      <div class="swiper-slide">
        <span>作者</span></div>
      <div class="swiper-slide">
        <span>生活</span></div>
      <div class="bar">
        <div class="color"></div>
      </div>
    </div>
  </div>
</div>

      <div class="swiper-container scroll">
        <div class="swiper-wrapper" style="margin-top: -2rem">
          <div class="swiper-slide slidescroll">
            <div class="swiper-container banner">
              <ul class="swiper-wrapper" id="swiper-wrapper">
                <li class="swiper-slide">
                  <a href="#"><img src="uploads/banner1.jpg"></a></li>
                <li class="swiper-slide">
                  <a href="#"><img src="uploads/banner2.jpg"></a></li>
                <li class="swiper-slide">
                  <a href="#"><img src="uploads/banner3.jpg"></a></li>
                <li class="swiper-slide">
                  <a href="#"><img src="uploads/banner2.jpg"></a></li>
              </ul>
              <div class="swiper-pagination"></div>
            </div>

          </div>
        </div>
      </div>
      </div>


    <div style="background-color:#eaeaea;height:10px;width:100%;margin-top: 5px"></div>
    <div class="bookAll" style="overflow-y: scroll">
    <div class="new_book">
      <div class="new_bookHeader">
        <span style="float: left;font-size: 17px;color:#020202;font-weight: bold;margin-top: 1rem;margin-left: 1rem">本周新书</span>
        <span style="float: left;font-size: 17px;margin-top: 1rem;margin-left: 10rem;color:#565656;font-weight: bold">2019.12.07<span style="font-size: 10px;color:#484848">上新</span></span>
      </div>
      <div style="width:90%;margin:1rem auto;border:1px solid #f4f4f4;border-radius:8px;padding-left: 1rem;padding-top: 1.2rem;padding-bottom: 1.2rem">
        <div style="float:left">
          <a onclick="bookInfo()"><img class="new_bookImg" src="images/mozac.png"></a>
        </div>
        <div class="new_book_content" style="float:left;margin-left: 1.2rem;margin-top: 1rem">
          <h3>遇见莫扎克</h3>
          <p>看莫扎克如何震撼人类音乐史</p>
          <div>播放量<span>306</span>万</div>
        </div>
      </div>
    </div>

    <!-- <div style="background-color:#eaeaea;height:10px;width:100%"></div>
    <div class="newList">
      <div class="newListHeader">
        <span style="float: left;font-size: 17px;color:#020202;font-weight: bold;margin-top: 1rem;margin-left: 1rem">近期新书</span>
        <span style="float: left;margin-top: 1rem;margin-left: 14rem"><a href="#" style="font-size: 15px;color:#888">全部</a>&nbsp;<span><a href="#" style="font-size: 17px;color:#484848">></a></span></span>
      </div>
      <div class="white_line"></div>
      <div style="width:90%;margin:1rem auto;padding-top: 0.5rem;padding-bottom: 1.2rem">
        <div style="float:left">
          <a onclick="bookInfo()"><img src="images/mozac.png" alt="" style="width:6rem"></a>
        </div>
        <div class="newList_content" style="float:left;margin-left: 1.2rem">
          <h3>遇见莫扎克</h3>
          <p>看莫扎克如何震撼人类音乐史</p>
          <div>播放量<span>306</span>万</div>
        </div>
      </div>     
   </div> -->


   <!-- <div style="background-color:#eaeaea;height:10px;width:100%"></div>
    <div class="themeSheet">
      <div class="themeSheetHeader">
        <span style="float: left;font-size: 17px;color:#020202;font-weight: bold;margin-top: 1rem;margin-left: 1rem">主题书单</span>
        <span style="float: left;margin-top: 1rem;margin-left: 14rem"><a href="#" style="font-size: 15px;color:#888">全部</a>&nbsp;<span><a href="#" style="font-size: 17px;color:#484848">></a></span></span>
      </div>
      <div class="white_line"></div>
      <div style="width:90%;margin:1rem auto;padding-top: 0.5rem;padding-bottom: 1.2rem">
        <div style="float:left">
          <a onclick="bookInfo()"><img src="images/mozac.png" alt="" style="width:6rem"></a>
        </div>
        <div class="themeSheet_content" style="float:left;margin-left: 1.2rem">
          <h3>遇见莫扎克</h3>
          <p>看莫扎克如何震撼人类音乐史</p>
          <div>播放量<span>306</span>万</div>
        </div>
      </div>     
   </div> -->


   <!-- <div style="background-color:#eaeaea;height:10px;width:100%"></div>
    <div class="week">
      <div class="weekHeader">
        <span style="float: left;font-size: 17px;color:#020202;font-weight: bold;margin-top: 1rem;margin-left: 1rem">本周推荐</span>
        <span style="float: left;margin-top: 1rem;margin-left: 14rem"><a href="#" style="font-size: 15px;color:#888">全部</a>&nbsp;<span><a href="#" style="font-size: 17px;color:#484848">></a></span></span>
      </div>
      <div class="white_line"></div>
      <div style="width:90%;margin:1rem auto;padding-top: 0.5rem;padding-bottom: 1.2rem">
        <div style="float:left">
          <a onclick="bookInfo()"><img src="images/mozac.png" alt="" style="width:6rem"></a>
        </div>
        <div class="week_content" style="float:left;margin-left: 1.2rem">
          <h3>遇见莫扎克</h3>
          <p>看莫扎克如何震撼人类音乐史</p>
          <div>播放量<span>306</span>万</div>
        </div>
      </div>     
   </div> -->
 </div>
 
<div style="background:#f9f9f9;position: fixed;bottom: 0;color:#0d0d0d;font-size:15px;width:100%">
    <ul style="width:17rem;margin:1rem auto;height:3rem;margin-bottom: 1rem">
      <a href="https://www.jndushu.com/index.html"><li style="float:left">
        <img src="images/read.png" style="width: 65%;height: 65%;margin-top: 0.2rem;">
        <div style="margin-left: 4px;margin-top: -5px;font-size:12px;color:#494748">读书</div>
      </li></a>
      <a href="https://www.jndushu.com/find.html"><li style="float:left;margin-left:4rem">
        <img src="images/find.png" style="width: 70%;height: 70%;margin-top: 0.1rem">
        <div style="margin-left: 4px;margin-top: -5px;font-size:12px;color:#494748">发现</div>
      </li></a>
      <a href="https://www.jndushu.com/setting.html"><li style="float:left;margin-left:4rem">
        <img src="images/myMessage.png" style="width: 56%;height: 56%;margin-top: 0.3rem;">
        <div style="margin-left: 1px;margin-top: -3px;font-size: 12px;color:#494748">我的</div>
      </li></a>
    </ul>
</div>

  <script src="js/swiper.min.js"></script>
  <script>
  //暂时设计每个slide大小需要一致
  barwidth = 36 //导航粉色条的长度px
  tSpeed = 300 //切换速度300ms
  var navSwiper = new Swiper('#nav', {
    slidesPerView: 6,
    freeMode: true,
    on: {
      init: function() {
        navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
        bar = this.$el.find('.bar')
        bar.css('width', navSlideWidth)
        bar.transition(tSpeed)
        navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置

        clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
        navWidth = 0
        for (i = 0; i < this.slides.length; i++) {
          navWidth += parseInt(this.slides.eq(i).css('width'))
        }

        topBar = this.$el.parents('body').find('#top') //页头

      },

    },
  });

  var pageSwiper = new Swiper('#page', {
    watchSlidesProgress: true,
    resistanceRatio: 0,
    on: {
      touchMove: function() {
        progress = this.progress
        bar.transition(0)
        bar.transform('translateX(' + navSum * progress + 'px)')
        //粉色255,72,145灰色51,51,51
        for (i = 0; i < this.slides.length; i++) {
          slideProgress = this.slides[i].progress
          if (Math.abs(slideProgress) < 1) {
            r = Math.floor((255 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
            g = Math.floor((72 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
            b = Math.floor((145 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
            navSwiper.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
          }
        }
      },
      transitionStart: function() {
        activeIndex = this.activeIndex
        activeSlidePosition = navSwiper.slides[activeIndex].offsetLeft
        //释放时导航粉色条移动过渡
        bar.transition(tSpeed)
        bar.transform('translateX(' + activeSlidePosition + 'px)')
        //释放时文字变色过渡
        navSwiper.slides.eq(activeIndex).find('span').transition(tSpeed)
        navSwiper.slides.eq(activeIndex).find('span').css('color', 'rgba(255,72,145,1)')
        if (activeIndex > 0) {
          navSwiper.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
          navSwiper.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(51,51,51,1)')
        }
        if (activeIndex < this.slides.length) {
          navSwiper.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
          navSwiper.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(51,51,51,1)')
        }
        //导航居中
        navActiveSlideLeft = navSwiper.slides[activeIndex].offsetLeft //activeSlide距左边的距离

        navSwiper.setTransition(tSpeed)
        if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
          navSwiper.setTranslate(0)
        } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
          navSwiper.setTranslate(clientWidth - navWidth)
        } else {
          navSwiper.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
        }

      },
    }
  });

  navSwiper.$el.on('touchstart', function(e) {
    e.preventDefault() //去掉按压阴影
  })
   navSwiper.on('tap', function(e) {

    clickIndex = this.clickedIndex
    clickSlide = this.slides.eq(clickIndex)
    pageSwiper.slideTo(clickIndex, 0);
    this.slides.find('span').css('color', 'rgba(51,51,51,1)');
    clickSlide.find('span').css('color', 'rgba(255,72,145,1)');
  })

  //内容滚动      
  var scrollSwiper = new Swiper('.scroll', {
    //65是头部的高
    //36是top地址和搜索的高

    slidesOffsetBefore: 72,
    direction: 'vertical',
    freeMode: true,
    slidesPerView: 'auto',

    mousewheel: {
      releaseOnEdges: true,
    },
    on: {
      touchMove: function() {

        if (this.translate > 72 - 36 && this.translate < 72) {
          topBar.transform('translateY(' + (this.translate - 72) + 'px)');
        }

      },
      touchStart: function() {
        startPosition = this.translate
      },
      touchEnd: function() {
        topBar.transition(tSpeed)
        if (this.translate > 36 && this.translate < 72 && this.translate < startPosition) {
          topBar.transform('translateY(-36px)');
          for (sc = 0; sc < scrollSwiper.length; sc++) {
            if (scrollSwiper[sc].translate > 36) {
              scrollSwiper[sc].setTransition(tSpeed);
              scrollSwiper[sc].setTranslate(36)
            }
          }
        }
        if (this.translate > 36 && this.translate < 72 && this.translate > startPosition) {
          topBar.transform('translateY(0px)');
          for (sc = 0; sc < scrollSwiper.length; sc++) {
            if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
              scrollSwiper[sc].setTransition(tSpeed);
              scrollSwiper[sc].setTranslate(72)
            }
          }
        }
      },

      transitionStart: function() {

        topBar.transition(tSpeed)
        if (this.translate < 72 - 36) {
          topBar.transform('translateY(-36px)');
          if (scrollSwiper) {
            for (sc = 0; sc < scrollSwiper.length; sc++) {
              if (scrollSwiper[sc].translate > 36) {
                scrollSwiper[sc].setTransition(tSpeed);
                scrollSwiper[sc].setTranslate(36)
              }
            }
          }

        } else {
          topBar.transform('translateY(0px)');

          if (scrollSwiper) {
            for (sc = 0; sc < scrollSwiper.length; sc++) {
              if (scrollSwiper[sc].translate < 72 && scrollSwiper[sc].translate > 0) {
                scrollSwiper[sc].setTransition(tSpeed);
                scrollSwiper[sc].setTranslate(72)
              }
            }
          }
        }
      },
    }

  })
  //热卖    
  var bannerSwiper = new Swiper('.banner', {
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      type: 'fraction',
      renderFraction: function(currentClass, totalClass) {
        return '<span class="' + currentClass + '"></span>' + '/' + '<span class="' + totalClass + '"></span>';
      },
    },
  });
  </script> 
</body>
</html>